<template>
    <view>
        <!-- <view class="menu">
            <view :class="type == '1' ? 'menu01' : 'menu02'" @tap="changetype" id="1"><text>储值卡</text></view>
            <view :class="type == '2' ? 'menu01' : 'menu02'" @tap="changetype" id="2"><text>优惠券</text></view>
        </view> -->

        <block v-if="card.type == 1">
            <view class="page">
                <view>
                    <view class="kk1_1">
                        <view class="kk1_1_text">名称</view>
                        <view>新客户充值</view>
                    </view>

                    <view class="kk1_1">
                        <view class="kk1_1_text">使用规则</view>
                        <view>同比例扣除</view>
                    </view>

                    <view class="kk1_1">
                        <view class="kk1_1_text">充值金额</view>
                        <view>1000</view>
                    </view>

                    <view class="kk1_1">
                        <view class="kk1_1_text">赠送余额</view>
                        <view>100</view>
                    </view>

                    <view class="kk1_1">
                        <view class="kk1_1_text">验证方式</view>
                        <view>无验证</view>
                    </view>

                    <view class="kk1_1">
                        <view class="kk1_1_text">有效期</view>
                        <view>不限期</view>
                    </view>
                </view>

                <view class="kk1_2">
                    <view class="kk1_2_">可用门店</view>
                    <view class="kk1_2_">共享茶室名称</view>
                    <view class="kk1_2_">参与包厢：所有包厢</view>
                    <view class="kk1_2_">备注：</view>
                </view>

                <navigator class="xinzengchuzhika" url="/pages/youhuiquan/updata">
                    <view>修改</view>
                </navigator>

                <view class="xinzengchuzhika" @tap="callphone">
                    <view>删除</view>
                </view>
            </view>
        </block>

        <block v-if="card.type == 2">
            <view class="page">
                <view class="kk2">
                    <view class="kk1_1">
                        <view class="kk1_1_text">名称</view>
                        <view>新用户优惠券</view>
                    </view>

                    <view class="kk1_1">
                        <view class="kk1_1_text">订单金额</view>
                        <view>100</view>
                    </view>

                    <view class="kk1_1">
                        <view class="kk1_1_text">减免金额</view>
                        <view>20</view>
                    </view>
                </view>

                <view>
                    <view class="kk1_1">
                        <view class="kk1_1_text">有效期</view>
                    </view>

                    <view class="kk1_1">
                        <view class="kk1_1_text">开始时间</view>
                        2024.4.9
                    </view>

                    <view class="kk1_1">
                        <view class="kk1_1_text">结束时间</view>
                        <view>2024.10.8</view>
                    </view>
                </view>

                <view class="kk2_2">
                    <view class="kk1_2_">可用门店</view>
                    <view class="kk1_2_">共享茶室名称</view>
                    <view class="kk1_2_">参与包厢：所有包厢</view>
                    <view class="kk1_2_">备注：</view>
                </view>

                <navigator class="xinzengchuzhika" url="/pages/youhuiquan/updata">
                    <view>修改</view>
                </navigator>

                <view class="xinzengchuzhika" @tap="callphone2">
                    <view>删除</view>
                </view>
            </view>
        </block>
    </view>
</template>

<script>
// pages/youhuiquan/xiangqing.js
var app = getApp();
import {youhuiquandetail} from "@/common/api";
export default {
    data() {
        return {
			id: 0,
			card: {}
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad(options) {
		const id = options.id
		this.setData({
			id: id
		})
		this.getyouhuiquandetail()
	},
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {},
    methods: {
        changetype: function (option) {
            var that = this;
            var type = option.currentTarget.id;
            that.setData({
                type: type
            });
            uni.showLoading({
                title: '加载中...'
            });
            uni.hideLoading();
        },

        callphone: function () {
            uni.showModal({
                title: '确认删除',
                content: '确认要删除此储蓄卡吗',
                success: function (res) {
                    if (res.confirm) {
                        console.log('确定');
                    } else if (res.cancel) {
                        console.log('取消');
                    }
                }
            });
        },

        callphone2: function () {
            uni.showModal({
                title: '确认删除',
                content: '确认要删除此优惠券吗',
                success: function (res) {
                    if (res.confirm) {
                        console.log('确定');
                    } else if (res.cancel) {
                        console.log('取消');
                    }
                }
            });
        },
		getyouhuiquandetail(){
			youhuiquandetail({id: this.id}, (res => {
				console.log(res)
				this.setData({
					card: res.data.data
				})
			}))
		}
    }
};
</script>
<style>
.menu {
    width: 100%;
    height: auto;
    overflow: hidden;
    top: 0;
}
.menu01 {
    width: 23%;
    line-height: 90rpx;
    font-size: 32rpx;
    text-align: center;
    float: left;
    color: #ff4800;
    border-bottom: 2px solid #ff4800;
}
.menu02 {
    width: 23%;
    line-height: 90rpx;
    font-size: 32rpx;
    text-align: center;
    float: left;
    color: #666666;
}

.page {
    background-color: rgb(247, 247, 247);
    height: 100vh;
    padding: 60rpx 40rpx 60rpx 40rpx;
}

.kk1_1 {
    display: flex;
    margin-bottom: 10rpx;
}

.kk1_1_text {
    margin-right: 150rpx;
    width: 150rpx;
}

.kk1_2 {
    margin-top: 100rpx;
    margin-bottom: 250rpx;
}

.kk1_2_ {
    margin-bottom: 40rpx;
}

.xinzengchuzhika {
    background-color: rgb(194, 162, 104);
    height: 100rpx;
    margin: 50rpx 40rpx;
    display: flex;
    justify-content: center;
    align-items: center;
}

.kk2 {
    margin-bottom: 60rpx;
}

.kk2_text {
    color: rgba(134, 133, 133, 0.493);
}

.kk2_2 {
    margin-bottom: 200rpx;
    margin-top: 100rpx;
}
</style>
